<template>
    <div class="box">
        <el-button size="medium" type="primary" plain @click="add" style="margin-right: 10px;">
            添加本月需发工资
        </el-button>
        <el-date-picker v-model="timeDate" type="month" placeholder="选择月" @change="getTableData" format="yyyy-MM"
            value-format="yyyy-MM-dd">
        </el-date-picker>
        <div v-if="userInfo.roleId === '1'" style="line-height: 40px;">
            <span>总计金额：{{ totalAmount }}</span>
        </div>
        <div class="wages-table">
            <el-table :data="tableData" border style="width: 100%" height="100%">
                <el-table-column prop="name" label="员工"> </el-table-column>
                <el-table-column prop="wagesNumber" label="工资"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" v-if="initNowDate == timeDate">
                        <el-button size="small" type="text" @click="update(scope.row)">编辑</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button size="small" type="text" @click="remove(scope.row)">删除</el-button>
                    </template>
                    <template slot-scope="scope" v-else>
                        <div>
                            非本月，不可操作
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="50%" :show-close="false" :title="dialogTitle"
            @close="cancleBtn">
            <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="员工名" prop="userId" v-if="(() => !dialogForm.id)()">
                    <el-select v-model="dialogForm.userId" placeholder="请选择" style="width: 100%;"
                        @focus="getEmployeeProfileList">
                        <el-option v-for="item in nameList" :key="item.id" :label="item.nickName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="本月工资" prop="wagesNumber">
                    <el-input placeholder="请输入工资数" type="number" v-model="dialogForm.wagesNumber"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitBtnDialog()" v-debounce>
                    确 定
                </el-button>
                <el-button @click="cancleBtn">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="removeDialog" width="50%" :show-close="false" title="删除" @close="cancleBtn">
            <div>{{ "如删除，本月将不再计算此人工资" }}</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="removeBtnDialog()" v-debounce>
                    确 定
                </el-button>
                <el-button @click="cancleBtn">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { remove } from 'jszip';
import financeManage from '../../api/financeManage';
import employeeProfile from '../../api/employeeProfile';
import user from '../../api/user';

export default {
    data() {
        return {
            userInfo: {},
            tableData: new Array(),
            dialogVisible: false,
            dialogTitle: "",
            page: {
                currentPage: 1,
                pageSize: 50,
                total: 0,
            },
            dialogForm: {
                id: void 0,
                userId: void 0,
                wagesNumber: void 0
            },
            initNowDate: void 0,
            timeDate: void 0,
            nameList: new Array(),
            rules: {
                userId: [{
                    required: true,
                    message: '请选择信息',
                    trigger: 'blur'
                }],
                wagesNumber: [{
                    required: true,
                    message: '请填工资',
                    trigger: 'blur'
                }],
            },
            removeDialog: false,
            totalAmount: 0
        }
    },
    created() {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    },
    mounted() {
        let date = new Date()
        let year = date.getFullYear().toString()
        let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
        this.initNowDate = year + '-' + month + '-' + '01'
        this.timeDate = year + '-' + month + '-' + '01'
        this.getTableData()
    },
    methods: {
        getTableData() {
            const data = {
                ...this.page,
                timeDate: this.timeDate
            }
            financeManage.selectWages(data).then(res => {
                res.data.map(item => item.name = "")
                this.tableData = res.data
                this.totalAmount = res.data.reduce((prev, cur) => prev + cur.wagesNumber, 0)
                this.tableData.map(item => user.getUser({ id: item.userId }).then(res => {
                    item.name = res.data.nickName
                }))
            })
        },
        add() {
            this.dialogVisible = true
            this.dialogTitle = "添加"
        },
        update(value) {
            this.dialogForm.id = value.id
            this.dialogForm.userId = value.userId
            this.dialogVisible = true
            this.dialogTitle = "修改"
        },
        remove(value) {
            this.dialogForm.id = value.id
            this.dialogForm.userId = value.userId
            this.removeDialog = true
        },
        cancleBtn() {
            this.dialogForm.id = void 0
            this.dialogForm.userId = void 0
            this.dialogForm.wagesNumber = void 0
            this.dialogVisible = false
            this.removeDialog = false
            this.dialogTitle = ""
        },
        submitBtnDialog() {
            const data = {
                ...this.dialogForm
            }
            if (this.dialogTitle == "添加") {
                financeManage.addWages(data).then(res => {
                    this.$message(res.message)
                }).finally(() => {
                    this.cancleBtn()
                    this.getTableData()
                })
            } else {
                financeManage.updateWages(data).then(res => {
                    this.$message(res.message)
                }).finally(() => {
                    this.cancleBtn()
                    this.getTableData()
                })
            }
        },
        getEmployeeProfileList() {
            const data = {
                currentPage: 1,
                pageSize: 999,
                total: 0
            }
            // employeeProfile.getEmployeeProfileList(data).then(res => {
            //     this.nameList = res.data.profileVoList
            // })
            user.fuzzyQuery(data).then(res => {
                this.nameList = res.data.userVoList
            })
        },
        removeBtnDialog() {
            const data = {
                ...this.dialogForm
            }
            financeManage.deleteWages(data).then(res => {
                this.$message(res.message)
            }).finally(() => {
                this.cancleBtn()
                this.getTableData()
            })
        }
    }
}
</script>

<style scoped>
.box {
    height: 100%;
}

.wages-table {
    height: 94%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-top: 10px;
}
</style>